﻿
@{
    ViewBag.Title = "Login";
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        body {
            height: 100%;
            width: 100%;
            font-size: 12px;
            min-width: 400px;
        }

        #div_Login {
            height: 300px;
            width: 400px;
            margin: auto;
            margin-top: 16%;
            box-shadow: 0px 0px 3px #333333;
            border-radius: 3px;
        }

        .header {
            width: 100%;
            height: 180px;
            background: #ffffff url("../../Content/content/loginheader.jpg");
            background-size: 100% 100%;
        }

        .form ul {
            width: 100%;
            height: 100%;
            padding: 0px;
            margin: 0px;
            text-decoration: none;
        }

            .form ul li {
                width: 100%;
                height: 40px;
                line-height: 40px;
                list-style-type: none;
                color: #666666;
            }

                .form ul li .formleft {
                    width: 80px;
                    height: 100%;
                    float: left;
                    margin-left: 70px;
                }

                .form ul li .formright {
                    border: 1px solid #CCCCCC;
                    border-radius: 3px;
                    height: 24px;
                    margin-top: 8px;
                    width: 170px;
                    float: left;
                }

                .form ul li input {
                    float: left;
                    width: 100%;
                    height: 100%;
                    border-radius: 3px;
                    line-height: 100%;
                    border: none;
                    outline: none;
                }

                .form ul li .btn_Login {
                    width: 253px;
                    height: 30px;
                    text-align: center;
                    line-height: 30px;
                    cursor: pointer;
                    background: #0094ff;
                    margin-left: 70px;
                    border-radius: 3px;
                    color: #FFFFFF;
                }

                    .form ul li .btn_Login:hover {
                        background: #1199fc;
                    }
    </style>
</head>

<body>
    <div id="div_Login">
        <div class="header">

        </div>
        <div class="form">
            <ul>
                <li>
                    <div class="formleft">用户名</div>
                    <div class="formright">
                        <input id="UserName" name="UserName" placeholder="name" type="text" value="user1" />
                    </div>
                </li>
                <li>
                    <div class="formleft">密码</div>
                    <div class="formright">
                        <input id="Pwd" name="Pwd" placeholder="password" type="password" value="password" />
                    </div>
                </li>
                <li>
                    <div class="btn_Login">登录</div>
                </li>

            </ul>
        </div>
    </div>
</body>
<script src="~/Content/js/jquery-2.2.3.min.js"></script>
<script>
    $(document).ready(function () {
        $(".btn_Login").click(function () {
            $.post("@Url.Action("Login", "WebChat")",
                { name: $("#UserName").val(), password: $("#Pwd").val() },
                function (result) {
                    if (result.indexOf("失败") != -1)
                        alert(result);
                    else
                        document.location.href = "@Url.Action("Chat", "WebChat")?uinid=" + result;
                });
        });
    });
</script>
</html>

